<template>
  <view class="container">
    <view style="height: 10px"></view>
    <view class="head">
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 90%;
          margin-left: 5%;
        "
      >
        <view style="width: 40%; text-align: center">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            :end="endDate"
            fields="day"
            @change="bindDateChange"
          >
            <input v-model="date" disabled type="text" />
          </picker>
        </view>
        <view style="width: 20%; text-align: center">至</view>
        <view style="width: 40%; text-align: center">
          <picker
            mode="date"
            :value="dates"
            :start="startDates"
            :end="endDates"
            fields="day"
            @change="bindDateChanges"
          >
            <input disabled v-model="dates" type="text" />
          </picker>
        </view>
      </view>
    </view>
    <view style="height: 40px"></view>
    <div v-for="item in list" @click="Detailtask(item)">
      <view class="li_box">
      <view class="card_green_box">
        <view class="card_title_box">
          <view>{{ item.requirementNo }}</view>
          <view>{{ item.createTime }}</view>
        </view>
        <u-line color="#c2c9c4" />
        <view class="card_title_box">
          <view>实验员：{{ item.experimenter }}</view>
          <view>电话:{{ item.experimenterPhone }}</view>
        </view>
        <view class="card_title_box">
          <view>实验助手：{{ item.experimentAssistant }}</view>
          <view>电话:{{ item.experimentAssistantPhone }}</view>
        </view>
        <u-line color="#c2c9c4" />
        <view style="margin-top: 10rpx" class="card_li_box"></view>
        <view class="card_li_box">项目名称：{{ item.itemName }}</view>
        <view class="card_li_box">取样点：#######</view>
        <view class="card_li_box">实验类别：{{ item.experimentCategory }}</view>
        <view class="card_li_box">派单人：{{ item.createBy }}</view>
        <u-line color="#c2c9c4" />
        <div style="height: 10px"></div>
          <div :class="item.feedbackState == 1 ? 'status' : 'status1'">
             {{ item.feedbackState==0?'未反馈':'已反馈' }}
             {{ item.experimentState==0?'未开始':item.experimentState==1?'进行中':item.experimentState==2?"已完成":item.feedbackState==0?'未反馈':item.feedbackState==1?
             '已完成':'' }}
          </div>
      </view>
    </view>
    </div>
    <view class="fixed_btn_green_box" @click="taskFB">
      <view
        class="btn_green_box"
        style="width: calc(100% - 40rpx); margin-top: 0"
        >任务发布</view
      >
    </view>
    <!-- 内容切换 -->
    <!-- <view v-show="list.length==0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </view> -->
    <!-- <tabBar :currentPage="currentPage" :role="role"></tabBar> -->
  </view>
</template>
<script>
// import tabBar from '../../compontents/tabBar/index.vue';
import { taskList } from "../api/api.js";
export default {
  components: {
    tabBar
  },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      date: currentDate,
      dates: currentDate,
      startTime: "2023.09.10",
      endTime: "2023.09.09",
      list: [],
      currentPage: '',
      role: ''
    };
  },
  methods: {
    Detailtask(i){
      console.log(i,'i');
      uni.setStorageSync('expertTaskDetail',i);
      if(i.experimentState==2){
      uni.navigateTo({
        url:'/pagesExpert/index/questDetail?flag=all'
      })
      }else{
        uni.navigateTo({
        url:'/pagesExpert/index/demandSelection'
      })
      }
      
      
    },
    taskFB(){
      uni.navigateTo({
        url:'/pagesExpert/index/taskRelease'
      })
    },
    bindDateChange: function (e) {
      //选择日期
      this.date = e.detail.value;
      console.log("date", this.date);
      this.funList();
    },
    bindDateChanges: function (e) {
      //选择日期
      this.dates = e.detail.value;
      console.log("date", this.date);
      this.funList();
    },
    getDate(type) {
      //年月日
      const date = new Date();
      // const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    taskDetail(item) {
      uni.setStorageSync("taskDetail", item);
      uni.navigateTo({ url: "/pagesDispatch/index/questDetail" });
    },
    addQuest() {
      uni.redirectTo({ url: "/pagesCopy/index/addQuest" });
    },
    funList() {
      taskList({
        actualBeginTime: this.date,
        actualEndTime: this.dates,
      }).then((res) => {
        console.log(res.data, "123");
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
    },
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
    startDates() {
      return this.getDate("start");
    },
    endDates() {
      return this.getDate("end");
    },
  },
  onLoad() {},
  onShow() {
    uni.hideHomeButton();
    this.funList();
    this.role = uni.getStorageSync('userInfo').remark;
      var pages = getCurrentPages(); 
      let currentPageRoute = pages[pages.length - 1].route;
      // 根据当前页面路径设置currentPage
      this.currentPage = currentPageRoute;
      console.log(this.currentPage);
  },
};
</script>
<style lang="scss">
.status {
    color: #fff;
    background: #1b9c46;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
  }
  .status1 {
    color: #1a512c;
    background: #FDBD18;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
  }
.container {
  height: 91vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}
.li_box {
  width: 100vw;
  padding: 20rpx;
  box-sizing: border-box;
  .card_green_box {
    padding: 20rpx;
    background-color: #b9e2c7;
    color: #1b9c46;
    border-radius: 10rpx;
    font-size: 28rpx;
    .card_title_box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;
      font-weight: 700;
      .card_tag_green {
        background-color: #1b9c46;
        color: #fff;
        padding: 5px 8px;
        font-size: 24rpx;
        border-radius: 8rpx;
      }
    }
    .card_li_box {
      margin-bottom: 10rpx;
      font-weight: 700;
    }
  }
}
.fixed_btn_green_box {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100vw;
  height: 120rpx;
  background-color: #e3ede2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_green_box {
  width: 100%;
  height: 80rpx;
  border-radius: 14rpx;
  background-color: #1b9c46;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 20rpx;
}
.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #b9e2c7;
  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}
.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}
.table {
  width: 90%;
  margin-left: 5%;
}
.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}
.status1 {
  color: #1a512c;
  background: #fdbd18;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}
.right {
  background: #fdbd18;
  color: #fff;
}
.right1 {
  background: #50ab18;
  color: #fff;
}
.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #1a512c;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}
.btn {
  display: flex;
  align-items: center;
  background: #1b9c46;
  color: #fff;
  border-radius: 7px;
  width: 30%;
  height: 60rpx;
  justify-content: center;
}
.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
</style>
